<template>
  <div style="display: inline-block" class="mgl10">
    <el-button
      type="primary"
      v-if="showButton"
      @click="changeStatus"
      :loading="loading"
    >
      {{ nextStatusText }}
    </el-button>
    <el-dialog
      :visible.sync="dialog"
      width="400px"
      title="贴标工单尚未确认"
      :append-to-body="true"
    >
      <div>
        <div class="mgb10">请确认以下货件单对应的贴标工单后再操作提交计划：</div>
        <el-link style="display: block" :underline="false" type="primary" v-for="item in labelOrderList" :key="item.id" @click="jumpLabelOrderInfo(item.id, true)">{{item.labelNo}}</el-link>
        <div class="font-red mgt10">点击单号跳转确认</div>
      </div>
      <template #footer>
        <el-button @click="dialog = false">取消</el-button>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import {changeShippingPlan} from "@/api/shippingPlan";
import {jumpLabelOrderInfo, jumpPageNewTag} from "@/utils/jumpView";

export default {
  name: 'ChangeShippingStatusBtn',
  data(){
    return {
      loading: false,
      dialog: false,
      labelOrderList: [],
    }
  },
  computed:{
    showButton(){
      const arr = [
        'saved','ready_to_ship'
      ];
      return arr.includes(this.data.status)
    },
    newStatus(){
      let status = 'ready_to_ship'
      if(this.data.status === status){
        status = 'shipped'
      }
      return status
    },
    // 获取下一个状态对应的文案
    nextStatusText(){
      const obj = {
        ready_to_ship: '提交计划',
        shipped: '确认发货',
      }
      return obj[this.newStatus]
    }
  },
  props: {
    data: {
      type: Object,
      required: true,
    }
  },
  methods: {
    jumpLabelOrderInfo,
    changeStatus(){
      const data = {
        id: this.data.id,
        status: this.newStatus,
      }


      new Promise((resolve, reject)=>{
        let title = `确认提交计划吗?`
        let message = ''
        if(this.newStatus === 'shipped'){
          title = '确认发货?'
          message = '确认发货后不可再添加或修改发货计划'
        }else{
          resolve()
          return;
        }
        this.$confirm(message, title)
          .then(res=>{
            resolve()
          })
          .catch(res=>{
            reject()
          })
      })
        .then(()=>{
          this.loading = true
          changeShippingPlan(data)
            .then(res=>{
              this.loading = false
              if(res.error === 0){
                this.$emit('changeRow')
                this.$successMessage(res.message)

                // 如果是确认发货则看有没有贴标工单要处理
                if(this.newStatus === 'shipped'){
                  const labelOrderIds = res.data.labelOrderIds;
                  if(labelOrderIds && labelOrderIds.length > 0){
                    labelOrderIds.forEach(labelOrderId => {
                      jumpPageNewTag('labelOrderInfo' , {
                        id: labelOrderId
                      })
                    })
                  }
                }

              }else if(res.error === 202){
                this.labelOrderList = res.data
                this.dialog = true
              }
              else{
                this.$errorMessage(res.message)
              }
            })
        })
        .catch(()=>{})



    }
  },
}
</script>

<style scoped lang="scss">

</style>
